<template>
  <Card class="crane-params">
    <div class="header">
      <Icon type="ios-build" />
      <h3>{{ title }}参数设置</h3>
    </div>

    <Form :label-width="100">
      <FormItem :label="localParams.actualStation.label">
        <InputNumber
          v-model="localParams.actualStation.value"
          :min="0"
          :max="999"
          @on-blur="handleBlur('actualStation')"
        />
      </FormItem>

      <FormItem :label="localParams.preStation.label">
        <InputNumber
          v-model="localParams.preStation.value"
          :min="0"
          :max="999"
          @on-blur="handleBlur('preStation')"
        />
      </FormItem>

      <FormItem :label="localParams.workpiece.label">
        <InputNumber
          v-model="localParams.workpiece.value"
          :min="0"
          :max="32000"
          @on-blur="handleBlur('workpiece')"
        />
      </FormItem>

      <FormItem :label="localParams.targetPosition.label">
        <InputNumber
          v-model="localParams.targetPosition.value"
          :min="0"
          :max="999"
          @on-blur="handleBlur('targetPosition')"
        />
      </FormItem>

      <FormItem :label="localParams.groupId.label">
        <InputNumber
          v-model="localParams.groupId.value"
          :min="0"
          :max="2147483600"
          @on-blur="handleBlur('groupId')"
        />
      </FormItem>
    </Form>
  </Card>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, N_drivingSet } from './config';

@T_srv.comp
export default class CraneParams extends vue {
  @T_srv.prop({ required: true }) title!: string;

  @T_srv.prop({ required: true }) params!: N_drivingSet.craneParams;

  public localParams: N_drivingSet.craneParams;

  @T_srv.watch('params', { deep: true })
  onParamsChange(newVal: N_drivingSet.craneParams) {
    this.$nextTick(() => {
      this.localParams = Tsrv.utils.cloneNoMatchVue(newVal, true);
      this.$forceUpdate();
    });
  }

  created() {
    this.localParams = Tsrv.utils.cloneNoMatchVue(this.params, true);
  }

  private handleBlur(field: string) {
    if (this.localParams[field].value !== this.params[field].value) {
      this.$emit('param-update', {
        id: this.localParams.id,
        field,
        params: this.localParams[field]
      });
    }
  }
}
</script>

<style lang="scss" scoped>
$text-color-secondary: #808695;
.crane-params {
  // margin-bottom: 16px;
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin-left: 8px;
      font-size: 16px;
    }
  }

  ::v-deep .ivu-form-item {
    margin-bottom: 12px;

    &-label {
      color: $text-color-secondary;
    }
  }

  ::v-deep .ivu-input-number {
    width: 100%;

    &-input {
      text-align: left;
    }
  }
}
</style>
